<template>
  <div class="basic_info">
    <div class="reset">
      <div class="resetInfo">
        <div class="title">{{ getTitle().title }}</div>
        <div class="order">
          <div class="order-title">订单详情</div>
          <div class="order-line"></div>
          <div class="order-detail">
            <div style="width: 162px">
              <div class="up-title">订单日期</div>
              <div class="down-value">{{ orderModel.createTime }}</div>
            </div>
            <div style="width: 181px">
              <div class="up-title">订单号</div>
              <div class="down-value">{{ orderModel.orderNumber }}</div>
            </div>
            <div style="width: 205px">
              <div class="up-title">商品名称</div>
              <div class="down-value">
                {{ orderModel.goodsType == 10 || orderModel.goodsType == 11 ? '' : '象过河云进销存'
                }}{{ orderModel.goodsName }}
              </div>
            </div>
            <div style="width: 130px">
              <div class="up-title">订单明细</div>
              <div class="down-value">{{ getTitle().orderInfo }}</div>
            </div>
            <div style="width: 111px">
              <div class="up-title">付款方</div>
              <div class="down-value">{{ orderModel.createBy }}</div>
            </div>
            <div style="width: 118px">
              <div class="up-title">应付金额</div>
              <div class="down-value-last">¥{{ (orderModel.orderMoney || 0).toFixed(2) }}</div>
            </div>
          </div>
          <div class="user-title" style="margin-top: 28px; min-width: 80px">选择支付方式</div>
          <div style="display: flex; margin-left: 92px; margin-top: 30px; align-items: center">
            <div style="display: flex; align-items: center" @click="current = 0">
              <img v-if="current == 0" style="width: 17px; height: 17px" src="./pay_on.png" alt="" />
              <img v-else style="width: 17px; height: 17px" src="./pay_off.png" alt="" />
              <img style="width: 38px; height: 34px; margin-left: 18px" src="./wxpay.png" alt="" />
              <div style="font-size: 20px; margin-left: 10px">微信支付</div>
            </div>
            <div style="display: flex; align-items: center; margin-left: 38px" @click="current = 1">
              <img v-if="current == 1" style="width: 17px; height: 17px" src="./pay_on.png" alt="" />
              <img v-else style="width: 17px; height: 17px" src="./pay_off.png" alt="" />
              <img style="width: 102px; height: 34px; margin-left: 18px" src="./alipay.png" alt="" />
            </div>
            <div style="display: flex; align-items: center; margin-left: 38px" @click="current = 2">
              <img v-if="current == 2" style="width: 17px; height: 17px" src="./pay_on.png" alt="" />
              <img v-else style="width: 17px; height: 17px" src="./pay_off.png" alt="" />
              <img style="width: 116px; height: 31px; margin-left: 18px" src="./duigong.png" alt="" />
            </div>
          </div>
        </div>
        <div class="pay-price" v-if="current == 2">
          <div style="line-height: 20px">
            <div style="color: #666; font-size: 11px; margin-bottom: 5px">
              注意：对公转账为 <span style="color: #ff0000">非实时结算</span>，办理转账后，请上传转账凭证，等待审核。
            </div>
            <div style="color: #004cff; font-size: 12px; font-weight: 600">账户名称：郑州象过河软件技术有限公司</div>
            <div style="color: #004cff; font-size: 12px; font-weight: 600">开户银行：中国光大银行郑州东风支行</div>
            <div style="color: #004cff; font-size: 12px; font-weight: 600">开户账号：7725 0188 0000 99786</div>
          </div>
          <div style="margin-left: 30px">
            <div style="display: flex; align-items: center; line-height: 50px">
              <span style="font-size: 14px; width: 120px">转账方账户名称：</span>
              <el-input
                class="cor-input"
                v-model="accountName"
                placeholder="请输入您的公司或个人名称"
                maxlength="30"
              ></el-input>
            </div>
            <div style="display: flex; align-items: center; line-height: 50px" v-if="!imagePath">
              <span style="font-size: 14px; width: 120px">上传转账凭证：</span>
              <el-upload
                class="upload-demo"
                :action="uploadAction"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :file-list="fileList"
                :headers="headers"
                :show-file-list="false"
              >
                <div class="upload-btn">上传</div>
              </el-upload>
              <div class="upload-tip">仅限图片格式</div>
            </div>
            <div style="display: flex; margin-top: 7px" v-else>
              <span style="font-size: 14px; width: 120px">上传转账凭证：</span>
              <div class="fill_goods_image">
                <el-image style="width: 100%; height: 100%" :src="imagePath" :preview-src-list="[imagePath]">
                </el-image>
                <div class="preview_image" style="pointer-events: none">
                  <img src="./image_preview.png" />
                </div>
                <div class="delete_image" @click="imagePath = ''">
                  <img src="./image_del.png" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pay-price">
          <div class="user-title">应付金额：</div>
          <div class="after-price">￥{{ (orderModel.orderMoney || 0).toFixed(2) }}</div>
        </div>
        <div class="resetBtn">
          <div v-if="current == 2 && submitDisabled" size="mini" style="background-color: #999" class="pay-btn">
            确定提交
          </div>
          <el-button v-else-if="current == 2 && !submitDisabled" size="mini" class="pay-btn" @click="confirmTransfer"
            >确定提交</el-button
          >
          <el-button v-else size="mini" class="pay-btn" @click="confirmPay">确定支付</el-button>
        </div>
      </div>
    </div>
    <j-modal
      :title="getTitle().popTitle"
      :width="width"
      :visible="showSignModal"
      switchFullscreen
      :okButtonProps="{ class: { 'jee-hidden': true } }"
      @cancel="handleSignCancel"
      cancelText="关闭"
    >
      <!-- <template slot="footer">
                <a-button key="back" v-show="false"> Return </a-button>
                <a-button key="submit" v-show="false"> Submit </a-button>
                <div style="display: flex; align-items: center; justify-content: center">
                    <a-button type="primary" @click="handleSignCancel"> 关闭 </a-button>
                </div>
            </template> -->
      <div>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div>
            <div>正在使用扫码转账业务</div>
            <div>收款方：郑州象过河软件技术有限公司</div>
          </div>
          <div style="font-size: 18px; font-weight: bold; color: #ff0707">
            {{ (orderModel.orderMoney || 0).toFixed(2) }}元
          </div>
        </div>
        <div style="margin-top: 30px; text-align: center">扫一扫付款</div>
        <div style="font-size: 18px; font-weight: bold; color: #ff0707; text-align: center; margin-top: 15px">
          {{ (orderModel.orderMoney || 0).toFixed(2) }}元
        </div>
        <div style="margin-top: 15px">
          <div id="qqq" style="display: flex; justify-content: center">
            <div style="margin: 0 auto" id="qrcode1" ref="qrCodeUrl1"></div>
          </div>
        </div>
      </div>
    </j-modal>
    <el-dialog
      :visible.sync="dialogVisible"
      width="300px"
      center
      style="border-radius: 20px"
      :show-close="false"
      @close="transferClose"
    >
      <div style="text-align: center">提交成功</div>
      <div style="text-align: center">请等待审核确认</div>
      <span slot="footer" class="dialog-footer">
        <div @click="dialogVisible = false" style="color: #004cff; font-size: 14px; cursor: pointer">关闭</div>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import { getAction } from '@/api/manage'
import PopupReset from '../../components/popupReset'
import PopupResetConfirm from '../../components/popupResetConfirm'
// import oneDiaLogStyle from '../../components/oneDiaLogStyle'
import Share from '../../components/Share'
import QRCode from 'qrcodejs2'
import { postAction, putAction } from '@/api/manage'
import { USER_INFO, ACCOUNT_BOOK, ACCESS_TOKEN } from '@/store/mutation-types'
import { setToken } from '@/utils/auth'
import store from '../../../store'
import { MessageBox } from 'element-ui'

import Vue from 'vue'
export default {
  name: 'systemReset',
  inject: ['closeAll'],
  components: {
    PopupReset,
    PopupResetConfirm,
    // oneDiaLogStyle,
    Share,
  },
  data() {
    return {
      current: 0,
      orderId: '',
      orderModel: {},
      showSignModal: false,
      width: 800,
      url: {
        queryById: '/XghAuthorizationCenter/xghAuthorizationCenterOrders/queryById',
      },
      timer: null,
      buyType: '',
      uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
      headers: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
      fileList: [],
      accountName: '',
      imagePath: '',
      dialogVisible: false,
    }
  },
  created() {
    // 判断没有参数，直接返回，无法完成支付
    let query = this.$route.query
    if (!query || !query.id) {
      this.$router.back(-1)
    } else {
      this.orderId = query.id
      this.buyType = query.buyType
      this.getOrderQueryById()
    }
  },
  computed: {
    submitDisabled() {
      if (this.current == 2 && (!this.imagePath || !this.accountName)) {
        return true
      } else {
        return false
      }
    },
  },
  methods: {
    getTitle() {
      let title = ''
      let orderInfo = ''
      let popTitle = ''
      if (this.orderModel.goodsType == 1) {
        // 账套升级
        title = '账套购买'
        let showData = this.orderModel.showData
        if (!showData || showData == 'null') {
          showData = (this.orderModel.yearNum || this.orderModel.oldYearNum) + '年'
        }
        orderInfo = this.orderModel.userNumBack + '/' + showData
        popTitle = '续费'
      } else if (this.orderModel.goodsType == 2) {
        // 系统恢复
        title = '系统恢复'
        orderInfo = '系统恢复'
        popTitle = '系统恢复'
      } else if (this.orderModel.goodsType == 3) {
        // 反审（次）
        title = '反审（次）'
        orderInfo = '反审（次）'
        popTitle = '反审（次）'
      } else if (this.orderModel.goodsType == 4) {
        // 反审（年）
        title = '反审（年）'
        orderInfo = '反审（年）'
        popTitle = '反审（年）'
      } else if (this.orderModel.goodsType == 10 || this.orderModel.goodsType == 11) {
        // 购买小程序商城
        title = '购买小程序商城'
        orderInfo = this.orderModel.showData
        popTitle = '购买小程序商城'
      }
      return {
        title,
        orderInfo,
        popTitle,
      }
    },
    // 根据订单ID查询订单
    getOrderQueryById() {
      getAction(this.url.queryById, { id: this.orderId }).then((res) => {
        if (res.code == 200) {
          this.orderModel = res.result
        }
      })
    },
    // 确定支付
    confirmPay() {
      console.log(12333321)
      this.showSignModal = true
      setTimeout(() => {
        // 微信支付配置的是晓光的服务，没有配郭哥的，正式用晓光的。
        // 晓光 宝塔服务器
        let signUrl = `http://cloudjinxiaocun.good-software.cn/#/?orderNumber=${this.orderModel.orderNumber}`
        // 郭哥 服务器
        // let signUrl = `http://yun.xiangguohe.cn/h5/#/?orderNumber=${this.orderModel.orderNumber}`
        // 本地 环境
        // let signUrl = `http://192.168.2.24:9002/#/?orderNumber=${this.orderModel.orderNumber}`
        // let signUrl = `http://192.168.0.181:9002/#/?orderNumber=${this.orderModel.orderNumber}`

        document.getElementById('qrcode1').innerHTML = ''
        var qrcode = new QRCode(this.$refs.qrCodeUrl1, {
          text: signUrl,
          width: 155,
          height: 155,
          colorDark: '#333333', //二维码颜色
          colorLight: '#ffffff', //二维码背景色
          correctLevel: QRCode.CorrectLevel.H,
        })
      }, 10)
      this.checkInterval()
    },
    handleSignCancel() {
      this.showSignModal = false
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    checkInterval() {
      this.timer = setInterval(() => {
        this.checkTimeOut(this.timer)
      }, 5000)
    },
    checkTimeOut(timer) {
      const that = this
      setTimeout(() => {
        getAction('/pay/query', { orderNumber: that.orderModel.orderNumber }).then((res) => {
          console.log('查询支付结果', res)
          if (res.success) {
            clearInterval(timer)
            that.showSignModal = false
            if (!this.buyType) {
              // 首次购买增加
              this.addPurchaseRewardRecord()
            }
            let model = res.result[0]
            if (model.goodsType == 1) {
              // 账套相关
              // that.updateAccount(model)
              // 增加账套到期标识
              Vue.ls.set('account-no-money', false)
              // 续费成功需要退出重新登录
              store.dispatch('Logout').then(() => {
                this.$router.push(`/user/Login`).catch((err) => {})
              })
            } else if (model.goodsType == 2) {
              // 系统恢复
              // that.dataRestore(model)
              setTimeout(() => {
                setToken('')
                that.$router.push('/user/Login').catch((err) => {})
              }, 1500)
            } else if (that.orderModel.goodsType == 3) {
              // 反审（次）
              // that.editConfigInfoByCode(model)
              let id = that.$route.query.id
              let pageKey = '/setting/buy/confirmPay?id=' + id
              that.$EventBus.$emit('closePage', pageKey)
            } else if (that.orderModel.goodsType == 4) {
              // 反审（年）
              // that.editConfigInfoByCode(model)
              let id = that.$route.query.id
              let pageKey = '/setting/buy/confirmPay?id=' + id
              that.$EventBus.$emit('closePage', pageKey)
            }
          }
        })
      }, 0)
    },
    addPurchaseRewardRecord() {
      let userInfo = Vue.ls.get('Login_Userinfo')
      console.log(userInfo)
      getAction('/accountbookinfo/xghAccountBook/addPurchaseRewardRecord', {
        phone: userInfo.phone,
      }).then((res) => {
        console.log(res)
      })
    },
    // 账套处理接口
    updateAccount(model) {
      console.log(model)
      postAction('/accountbookinfo/xghAccountBook/updateAccountBook', {
        buyType: model.buyType,
        orderNum: 5000,
        userNum: model.userNum,
        xghAccountBookId: model.xghAccountBookId,
        yearNum: model.yearNum,
      }).then((res) => {
        if (res.code == 200) {
          // 增加账套到期标识
          Vue.ls.set('account-no-money', false)
          // 续费成功需要退出重新登录
          store.dispatch('Logout').then(() => {
            this.$router.push(`/user/Login`).catch((err) => {})
          })
          // 获取开账状态，未开账先开账
          // const openAccountValue = this.$store.getters.openAccountValue
          // if (openAccountValue !== 3) {
          //     this.$router.push({ name: "business-SystemConfiguration" }).catch(err => {
          //     })
          // }
          // // 关闭其他标签
          // this.closeAll()
          this.$router.back(-2)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 系统恢复接口
    dataRestore(model) {
      const that = this
      getAction('/sysConfig/systemReset/systemRestored', {
        xghAccountBookId: model.xghAccountBookId,
      }).then((res) => {
        console.log(res)
        if (res.code == 200) {
          setTimeout(() => {
            setToken('')
            that.$router.push('/user/Login').catch((err) => {})
          }, 1500)
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 反审接口
    editConfigInfoByCode(model) {
      const that = this
      getAction('/sysConfig/systemConfig/editReVerifyConfig', {
        xghAccountBookId: model.xghAccountBookId,
        value: model.goodsType - 2,
      }).then((res) => {
        if (res.code == 200) {
          let id = that.$route.query.id
          let pageKey = '/setting/buy/confirmPay?id=' + id
          that.$EventBus.$emit('closePage', pageKey)
        } else {
          that.$elMessage.error(res.message)
        }
      })
    },
    beforeUpload: function (file) {
      var fileType = file.type
      if (fileType.indexOf('image') < 0) {
        this.$elMessage.warning('请上传图片')
        return false
      }
    },
    handleSuccess(e) {
      let url = e.message
      this.imagePath = url
      console.log(url)
    },
    confirmTransfer() {
      let params = {
        transferAccountName: this.accountName,
        transferVoucherImg: this.imagePath,
        orderId: this.orderModel.orderNumber,
        payType: 3,
      }
      putAction('/XghAuthorizationCenter/xghAuthorizationCenterOrders/edit', params).then((res) => {
        if (res.code == 200) {
          console.log(res)
          this.dialogVisible = true
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    transferClose() {
      // this.dialogVisible = false
      this.$router.back()
    },
  },
}
</script>
  
<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 20px;
}
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.reset {
  background-color: #fff;
  height: 100%;

  .resetInfo {
    padding: 0.375023rem;

    .title {
      border-bottom: 1px solid #eee;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #1b94fb;
      padding-bottom: 13px;
    }

    .order {
      border-bottom: 1px solid #eee;
      padding-bottom: 77px;
    }

    .order-title {
      margin-top: 20px;
      height: 24px;
      font-size: 17px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
    }

    .order-line {
      margin-top: 9px;
      width: 877px;
      height: 3px;
      background: #1993fb;
      border: 1px solid #cbced3;
    }

    .order-detail {
      width: 877px;
      height: 95px;
      background: #e3f6ff;
      display: flex;
      text-align: center;
    }

    .up-title {
      margin-top: 18px;
      height: 18px;
      font-size: 13px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
    }

    .down-value {
      margin-top: 14px;
      height: 24px;
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
    }

    .down-value-last {
      margin-top: 14px;
      height: 24px;
      font-size: 17px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #fd6c21;
      line-height: 24px;
    }

    .item-div-1 {
      margin-top: 20px;
      margin-right: 20px;
      width: 171px;
      height: 103px;
      background-image: url('./v_selected.png');
      background-repeat: no-repeat;
      background-size: 171px 103px;
    }

    .item-div-2 {
      margin-top: 20px;
      margin-right: 20px;
      width: 171px;
      height: 103px;
      background-image: url('./v_unselect.png');
      background-repeat: no-repeat;
      background-size: 171px 103px;
    }

    .item-text-1 {
      padding: 26px 26px 0 26px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #999999;
      line-height: 30px;
    }

    .item-text-2 {
      padding: 0 26px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #999999;
      line-height: 30px;
    }

    .user-number {
      padding: 35px 0;
      border-bottom: 1px solid #eee;
    }

    .user-title {
      min-width: 72px;
      height: 18px;
      line-height: 18px;
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }

    .reduce-add {
      width: 34px;
      height: 34px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border: 1px solid #cbced3;
      font-size: 16px;
      color: #cbced3;
      text-align: center;
      line-height: 32px;
    }

    .number-input {
      margin-left: -1px;
      width: 69px;
      height: 34px;
      background: #ffffff;
      border: 1px solid #cbced3;
      text-align: center;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }

    .number-input:focus {
      outline: none;
    }

    .pay-price {
      display: flex;
      align-items: center;
      padding: 25px 0;
      border-bottom: 1px solid #eee;
    }

    .after-price {
      height: 32px;
      font-size: 25px;
      font-family: Helvetica Neue-Bold, Helvetica Neue;
      font-weight: bold;
      color: #fd6c21;
      line-height: 32px;
    }

    .before-price {
      font-size: 20px;
      font-family: HelveticaNeue-, HelveticaNeue;
      font-weight: normal;
      color: #666666;
      line-height: 32px;
      text-decoration: line-through;
    }
  }
}

.resetBtn {
  margin-top: 28px;
}

.pay-btn {
  width: 103px;
  height: 35px;
  background: #1993fb;
  font-size: 13px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-btn {
  width: 104px;
  height: 37px;
  border: rgb(53, 53, 255) solid 1px;
  color: rgb(53, 53, 255);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(211, 229, 255);
}
.upload-tip {
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 300;
  color: #999999;
  margin-left: 10px;
}
.cor-input {
  // border: #D9D9D9 1px solid;
  // height: 36px;
  // background-color: white;
  // padding: 0 5px;
  // border-radius: 2px;
  width: 251px;
}
.fill_goods_image {
  width: 74px;
  height: 45px;
  position: relative;

  .preview_image {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 21px;
      height: 21px;
    }
  }

  .delete_image {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 15px;
      height: 15px;
    }
  }
}
</style>